一休 Frontend Meetup 2025-02-10
https://gyazo.com/afdba432077df09f2c44bbcabc973e47
一休の会員基盤リニューアル（2021年）
ログインの実装が各サービスに分散・多重実装していた 新しいサービスを作るのに障壁
ログインコンポーネントを提供
どのようにつくるか
考えること
サービス全体で使えること
ページ遷移を挟まずにログインできる
予約入力している途中でログインページへ遷移すると予約体験を損ねてします
どのアプリケーションプラットフォームでも使えること
Vue CLI
配信における最適化
不要なコードをバンドルしない
スタイルが共通化されてなくて重複してしまう
ビルド時に必要なクラスだけ生成される
国内宿泊予約サービス
エンドユーザー向け画面の改善
主体的に改善を行う（気になったときに着手）
計測可視化環境
画像最適化
auto=format
w,h
ネットワーク最適化
複数のクエリを１つに束ねる
ペイロードが６つ返ってくる
クエリごとにキャッシュする
情報収集
https://gyazo.com/7b1dee6ca48bd79d0ee899304a2b2862
厳選された上質な施設にふさわしい高級感のあるUI
フォント
余白
ゆったりした値を扱う
画像
高品質な写真を選定
ガイドライン→全社デザインシステム→プロダクトデザインシステムという展開
アイコンやブランドロゴも共通のもの化
苦労
プロダクトで違った解釈でやっていたので一新はしない
全社共通のカラーは最低限のものに留める
デザインの意図を共有
共通化の判断
デザイナー・エンジニアとで見直しを定例化している
成果
共通言語で会話できるようになった
一貫した世界観の共有
本質的なユーザー体験の検討に集中
サイトコントローラー
Web予約
予約台帳
予約管理（チャート）
店舗レイアウト
顧客管理
在庫管理機能（チャート・カレンダー）
印刷機能
インタラクティブUIの基礎
absolute
transform
オブジェクトの移動は連続する移動量（delta）を使用する
移動量
Canvas
描画コストの高いもの
グリッド
背景・複雑な図形
そのほかDOM
操作対象のオブジェクトなどアクセシビリティを確保したい
アクセシビリティを意識する
DOMを使い合わせる
buttonを使うことでタブフォーカスができるようになる
座標・サイズ計算
ロジックを純粋関数で切り出す（inがあったらoutは一致する形） レイヤーで考えるコンポーネントを設計する
レイヤーごとで責務を分けることで、重なりの表現や表示の切り替え、などの管理がしやすくなる